<template>
    <view class="container">
        <view class="back-move-top"></view>
        <u-popup v-model="data.show" mode="center" :mask-close-able="false">
            <view class="wrap">
                <u-image src="@/static/images/update-pop-image.png" width="100%" mode="widthFix"></u-image>
                <view class="content">
                    <view class="title">更新日志</view>
                    <u-parse :html="data.content" class="parse"></u-parse>
                    <u-line-progress :percent="data.percent" active-color="#FC4F75" striped striped-active class="process"> </u-line-progress>
                    <view class="btns">
                        <button v-if="data.isShow" data-theme="default" class="o-bg-price o-box-shadow-light-l o-font-color-white" :loading="false" @tap="handleDownLoad">取消</button>
                        <button v-if="!data.isShow" data-theme="default" class="o-bg-price o-box-shadow-light-l o-font-color-white" :loading="false" @tap="installApp(data.downloadResult)">安装</button>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script lang="ts" setup>
import { onBackPress, onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'

interface dataProps {
    show: boolean
    content: string
    isShow: boolean
    percent: number
    downloadTask: any
    needUpdate: number | string
    downloadResult: any
    back: boolean
}
const data: dataProps = reactive({
    show: true,
    percent: 0,
    downloadTask: undefined,
    isShow: true,
    needUpdate: 0,
    downloadResult: undefined,
    back: false,
    content: ''
})

onLoad(props => {
    console.log(props)
    // #ifdef APP-PLUS
    if (props.downloadUrl) {
        data.downloadTask = createDownLoad(props.downloadUrl)
        startDownLoad(data.downloadTask)
    }
    if (props.needUpdate) {
        data.needUpdate = props.needUpdate
    }
    if (props.content) {
        data.content = props.content
    }
    if (props.back) data.back = true
    // #endif
})

onBackPress(e => {
    if (e.from === 'backbutton') {
        handleDownLoad()
    }
})

const createDownLoad = (url: string) => {
    // #ifdef APP-PLUS
    let downloadTask = uni.downloadFile({
        url: url,
        success: downloadResult => {
            if (downloadResult.statusCode === 200) {
                data.isShow = false
                data.downloadResult = downloadResult
            }
        }
    })
    return downloadTask
    // #endif
}
const startDownLoad = (downloadTask: any) => {
    onProgressUpdate(downloadTask)
}
const onProgressUpdate = (downloadTask: any) => {
    downloadTask.onProgressUpdate((res: any) => {
        data.percent = res.progress
    })
}
const handleDownLoad = () => {
    // #ifdef APP-PLUS
    uni.$u.$showModal({
        title: '提示',
        content: data.needUpdate == '0' ? '确定要取消此次更新吗？' : '确定要取消此次更新吗？\n(取消更新将无法使用)',
        cancelText: '我再想想',
        confirmText: '确定',
        success: (res: any) => {
            if (res.confirm) {
                data.downloadTask.abort()
                if (data.needUpdate == '0') {
                    // this.$u.$MRouter.back(1, 'slide-out-bottom')
                    setTimeout(() => {
                        if (data.back) {
                            uni.$u.$MRouter.back(1, 'slide-out-bottom')
                        } else {
                            uni.$u.$MRouter.login.to()
                        }
                    }, 300)
                } else if (data.needUpdate == '1') {
                    plus.runtime.quit()
                }
            }
        }
    })
    // #endif
}

const installApp = (download: any) => {
    // #ifdef APP-PLUS
    plus.runtime.install(
        download.tempFilePath,
        {
            force: false
        },
        () => {
            console.log('install success...')
            plus.runtime.restart()
        },
        () => {
            console.error('install fail...')
            // 需要强制更新，更新失败强制退出
            if (data.needUpdate == '1') {
                plus.runtime.quit()
            }
        }
    )
    // #endif
}
</script>

<style scoped lang="scss">
.container {
    background-color: #2c2c2c;
    height: 100vh;

    :deep(.u-mode-center-box) {
        background: transparent;
    }

    .wrap {
        width: 80vw;

        .content {
            min-height: 500rpx;
            background-color: white;
            margin-top: -5px;
            padding: 0rpx 30rpx;
            position: relative;
            border-radius: 0 0 30rpx 30rpx;

            .title {
                font-weight: bold;
                font-size: 36rpx;
                line-height: 60rpx;
            }

            .btns {
                position: absolute;
                width: calc(100% - 60rpx);
                bottom: 40rpx;
            }

            .parse {
                margin: 20rpx 0;
            }

            .process {
                position: absolute;
                bottom: 172rpx;
                width: calc(100% - 60rpx);
            }
        }
    }
}

.back-move-top {
    background: url(@/static/images/login.jpg);
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 10000px;
    animation: back_move_top 600s linear infinite;
}

@keyframes back_move_top {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10000px);
    }
}
</style>
